<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button class="btn">计算</button>
  <input type="text" id="num" placeholder="输入天数" value="40"/>
<script>
  /*
    斐波那契数列: 1 1 2 3 5 8 13 21 34 55 ...
      f(1)  1
      f(2)  1
      f(3) = f(1) + f(2)
      f(4) = f(2) + f(3)
      f(5) = f(3) + f(4)
      ....
      f(n) = f(n-1) + f(n-2)
  */
  // function fibonacci(n) {
  //   if (n <=2) return 1;
  //   return fibonacci(n - 2) + fibonacci(n - 1);
  // }

  document.querySelector(".btn").onclick = function () {
    console.log('开始计算')
    // console.log(fibonacci(document.querySelector('#num').value*1)); // 卡顿的时间过长
    // 创建worker对象
    const worker = new Worker('./10_fib-worker.js', {
      type: 'module'  // 让分线程模块能支持ESM的引入其它模块
    })

    // 向分线程发送消息, 携带天数数据
    worker.postMessage(document.querySelector('#num').value*1)
    // 绑定监听, 接收分线程发送过来的结果数据
    worker.addEventListener('message', (event) => {
      alert(event.data)
    })
  };
</script>
</body>
</html>